<template>
  <transition name="confirm-fade">
    <div class="confirm" v-show="showFlag" @click.stop>
      <div class="confirm-wrapper">
        <div class="confirm-content">
          <p class="text">{{text}}</p>
          <div class="operate">
            <div class="operate-btn left" @click="cancel">{{cancelBtnText}}</div>
            <div class="operate-btn" @click="confirm">{{confirmBtnText}}</div>
          </div>
        </div>
      </div>
    </div>
  </transition>
</template>
<script>
export default {
  data() {
    return {
      showFlag: false
    }
  },
  props: {
    text: {
      type: String,
      default: '是否清空所有搜索历史'
    },
    confirmBtnText: {
      type: String,
      default: '清空'
    },
    cancelBtnText: {
      type: String,
      default: '取消'
    }
  },
  methods: {
    show() {
      this.showFlag = true
    },
    hide() {
      this.showFlag = false
    },
    cancel() {
      this.hide()
      this.$emit('cancel')
    },
    confirm() {
      this.hide()
      this.$emit('confirm')
    }
  }
}
</script>
<style lang="stylus" scoped>
.confirm
  position: fixed
  top: 0
  bottom: 0
  left: 0
  right: 0
  z-index: 998
  background-color: rgba(0, 0, 0, 0.3)
  &.confirm-fade-enter-active
    animation: confirm-fadein 0.3s
    .confirm-content
      animation: confirm-zoom 0.3s
  .confirm-wrapper
    position: absolute
    top: 50%
    left: 50%
    transform: translate(-50%, -50%)
    z-index: 999
    .confirm-content
      background-color: #333
      border-radius: 13px
      width: 270px
      .text
        padding: 19px 15px
        line-height: 22px
        text-align: center
        font-size: 18px
        color: hsla(0, 0%, 100%, 0.5)
      .operate
        display: flex
        align-items: center
        .operate-btn
          flex: 1
          text-align: center
          line-height: 22px
          padding: 10px 0
          color: hsla(0, 0%, 100%, 0.3)
          border-top: 1px solid rgba(0, 0, 0, 0.3)
          &.left
            border-right: 1px solid rgba(0, 0, 0, 0.3)
@keyframes confirm-fadein
  0%
    opacity: 0
  100%
    opacity: 1
@keyframes confirm-zoom
  0%
    transform: scale(0)
  50%
    transform: scale(1.1)
  100%
    transform: scale(1)
</style>
